<template>
  <div v-loading="loading">
    <el-form :model="cuForm" :rules="cuRules" ref="cuForm" label-width="60px">
      <!-- <el-form-item label="工单" prop="work_order_id">
        <el-select clearable v-model="cuForm.work_order_id" placeholder="请选择工单" @change="changeOrder" @clear="clearOrder">
          <el-option :label="item.work_order_name" :value="item.work_order_id" v-for="(item, i) in orderList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="合同" prop="contract_id">
        <el-select clearable v-model="cuForm.contract_id" placeholder="请选择合同" @change="changeContract" @clear="clearContract">
          <el-option :label="item.contract_name" :value="item.contract_id" v-for="(item, i) in contractList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间" prop="setting_info">
        <el-select clearable v-model="cuForm.setting_info" placeholder="请选择时间" value-key="contract_setting_id" @change="changeContractSetting"  @clear="clearContractSetting">
          <el-option :label="item.start_at_fmt +'~'+item.end_at_fmt" :value="item" v-for="(item, i) in contractSettingList"></el-option>
        </el-select>
      </el-form-item>
      -->
      <el-form-item label="工单" prop="work_order_info">
        <el-select clearable v-model="cuForm.work_order_info" placeholder="请选择工单" value-key="work_order_id"
                   @change="changeOrder" @clear="clearOrder"
        >
          <el-option :label="item.work_order_name" :value="item" v-for="(item, i) in orderList" :key="i"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getOrderByDevice, getContentByOrder, getSettingByContent } from '@/api/app/worker'

export default {
  name: 'form-device-choose',
  props: {
    id: {
      Type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: true,
      orderList: [],
      contractList: [],
      contractSettingList: [],
      cuForm: {
        work_order_id: null,
        contract_id: null,
        setting_info: null,
        work_order_info: null
      },
      cuRules: {
        work_order_id: [
          { required: true, message: '请选择工单', trigger: 'change' }
        ],
        contract_id: [
          { required: true, message: '请选择合同', trigger: 'change' }
        ],
        setting_info: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        work_order_info: [
          { required: true, message: '请选择工单', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.initList(this.id)
  },
  watch: {
    id(val, oldVal) {
      if (val !== oldVal) {
        this.$refs['cuForm'].resetFields()
        this.initList(val)
      }
    }
  },
  methods: {
    initList(id) {
      const that = this
      that.loading = true
      this.getOrderByDevice(id, (work_order_id) => {
        // that.getContentByOrder(work_order_id, (contract_id)=>{
        //   that.getSettingByContent(work_order_id, contract_id, ()=>{
        //     that.loading = false
        //   })
        // })
        that.loading = false
      })
    },
    changeOrder(e) {
      // const that = this
      // that.loading = true
      // that.cuForm.contract_id = null
      // that.cuForm.setting_info = null
      // that.getContentByOrder(e, (contract_id)=>{
      //   that.getSettingByContent(that.cuForm.work_order_id, contract_id, ()=>{
      //     that.loading = false
      //   })
      // })
    },
    changeContract(e) {
      const that = this
      that.loading = true
      that.cuForm.setting_info = null
      that.getSettingByContent(that.cuForm.work_order_id, e, () => {
        that.loading = false
      })
    },
    changeContractSetting(e) {
      console.log('changeContractSetting', e)
    },
    clearOrder() {
      this.contractList = []
      this.contractSettingList = []
      this.cuForm.work_order_id = null
      this.cuForm.contract_id = null
      this.cuForm.setting_info = null
      this.cuForm.work_order_info = null
    },
    clearContract() {
      this.contractSettingList = []
      this.cuForm.contract_id = null
      this.cuForm.setting_info = null
    },
    clearContractSetting() {
      this.cuForm.setting_info = null
    },
    getOrderByDevice(id, callback) {
      if (id) {
        return getOrderByDevice({ device_id: id }).then(({ data }) => {
          let work_order_id = data.length && data[0].work_order_id
          this.orderList = data
          this.cuForm.work_order_id = work_order_id || null
          this.cuForm.work_order_info = data.length && data[0] || null
          if (typeof callback == 'function') callback(work_order_id)
        })
      } else if (typeof callback == 'function') callback()
    },
    getContentByOrder(id, callback) {
      if (id) {
        return getContentByOrder({ work_order_id: id }).then(({ data }) => {
          let contract_id = data.length && data[0].contract_id
          this.contractList = data
          this.cuForm.contract_id = contract_id || null
          if (typeof callback == 'function') callback(contract_id)
        })
      } else if (typeof callback == 'function') callback()
    },
    getSettingByContent(orderId, id, callback) {
      if (id) {
        return getSettingByContent({ work_order_id: orderId, contract_id: id }).then(({ data }) => {
          let setting_info = data.length && data[0]
          this.contractSettingList = data
          this.cuForm.setting_info = setting_info || null
          if (typeof callback == 'function') callback()
        })
      } else if (typeof callback == 'function') callback()
    }
  }
}
</script>

<style>
</style>
